$(function(){
    //var form_code = '<form id="fileform" action="UserIconSaverServlet"><input id="iconfile" type="file" name="icon"></form>';

    /*
     * form 默认的 enctype 是 application/x-www-form-urlencoded
     * 上传文件要改成 multipart/form-data
     */
    var form_code = [
        '<form id="fileform" method="post" enctype="multipart/form-data" action="User/addIcon">' ,
        '<input id="iconfile" type="file" accept="image/png,image/jpg" name="icon">' ,
        '</form>'
    ].join("");

    $("#userIcon").on("click" , function(){
        var iframe = document.getElementById("uploader");

        // iframe 元素内使用问外部不同的 文档对象，可以通过 contentDocument 获得
        // 获得的 contentDocument 属性拥有个主页面 document 相同的接口方法
        iframe.contentDocument.body.innerHTML = form_code;

        var fileform = iframe.contentDocument.getElementById("fileform");
        var iconfile = iframe.contentDocument.getElementById("iconfile");

        $(iframe).on("load" , function(){
            // iframe 内部也使用和主页面不同的 window 对象，可以通过 contentWindow 获得
            // Servlet 响应的是一个完成的 HTML 页面，其中生成的 JSON 字符串 作为变量 response 的值
            // js 中全局变量都保存在 window 对象下，可以通过 window.全局变量名 过去
            // 对于 iframe 则要先获取 iframe 自己的 window 对象，在用相同的方法访问
            var iframe_response = iframe.contentWindow.response;

            // 将新路径设置到 img 元素，用于展现给用户预览
            $("#userIcon").attr("src" , iframe_response.url);

            // 将新路径设置到 hidden 元素，用于表单提交
            $("#icon").val(iframe_response.url);
        });

        // 监听 file 的 onchange 事件，如果该事件被触发
        // 说明用户选择了一个新的图片，则提交该表单至后台
        $(iconfile).on("change" , function(){
            fileform.submit();
        })

        // 利用 jquery 模拟触发 file型input 的点击事件
        // file click 事件被触发是，浏览器会弹出文件选择对话框
        // 如果用户选择了与 file value属性不同路径的文件
        // 就会触发 file的 onchange 事件
        $(iconfile).trigger("click");
    });
});